<template>
	<view class="home">
		<!-- tab -->
		<view class="tabBox">
			<u-tabs :list="tabList" @click="clicktab"></u-tabs>
		</view>
		    
		<!-- 骨架屏 -->
		<view class="skeleton" v-show="skeleton">
			<u-skeleton :loading="true" title="false" rows="5"
			rowsHeight="28"></u-skeleton>
		</view>	
			
		<view v-show="!skeleton">
			<!-- 章节渲染box 这个是全部 -->
					<view class="chapterBox" v-for="chapterList in chapterList" 
						:key="chapterList.cid" v-if="tabIndex == 0" 
						@click="goQuestionDeatil(`${chapterList.Chapterid._value}`)">
						
						<view class="chapterTitle">
							{{chapterList.ChapterName}}
						</view>
						
						<view class="chapterContent">
							共{{chapterList.Chapterid.ds.length}}题
						</view>
						
						<view class="more">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<!-- 基础篇 -->
					<view class="chapterBox" v-for="easyList in easyList"
						:key="easyList.cid" v-if="tabIndex == 1" 
						@click="goQuestionMode(`${easyList.Chapterid._value}`,0)">
						
						<view class="chapterTitle">
							{{easyList.ChapterName}}
						</view>
						
						<view class="chapterContent">
							共{{easyList.Chapterid.ds.length}}题
						</view>
						
						<view class="more">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<!-- 进阶篇 -->
					<view class="chapterBox" v-for="hardList in hardList"
						:key="hardList.cid" v-if="tabIndex == 2" 
						@click="goQuestionMode(`${hardList.Chapterid._value}`,1)">
						
						<view class="chapterTitle">
							{{hardList.ChapterName}}
						</view>
						
						<view class="chapterContent">
							共{{hardList.Chapterid.ds.length}}题
						</view>
						
						<view class="more">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
		
		</view>
		
	</view>
	

</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				backRefresh: false, //用于从上一级页面返回时刷新数据
				skeleton:true,//数据加载完毕后取消骨架屏
				easyList:[],//保存基础篇
				hardList:[],//保存提高篇
				uid:"",
				userData:{}, //保存用户数据
				cid:0, //用于判断科目 0是ds 1是os 2是计网 3是寄组
				tabIndex:0,//用去判断 全部 基础还是提高篇
				tabList:[
					{
						name:"全部"
					},
					{
						name:"基础篇"
					},
					{
						name:"提高篇"
					}
				],
				chapterList:[]////保存获取的章节信息
			};
		},
		onShow() {
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.backRefresh) {
				currentPage.data.backRefresh = false;
				this.getChapterData();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			}
		},
		onUnload() {
			 var pages = getCurrentPages(); //当前页面栈
			         if (pages.length > 1) {
			           var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
			           beforePage.data.backRefresh = true;
			         }
		},
		onReady() {
			this.getChapterData();
		},
		onLoad(e) {
			console.log("首页传参数",e);
			this.cid = parseInt(e.qid);//获得外部点击的是哪个学科
			this.uid = e.uid;//获取uid
			// console.log("cid",this.cid);
			
		},
		methods:{
			//获取章节信息
			async getChapterData(){
				
				const chapterTemp = db.collection("chapter").where({
					cid:this.cid
				}).getTemp();
				//全部的题目临时表
				const qNumTemp = db.collection("ds").where({
					Cid:this.cid
				})
				.field("_id,Chapterid,tagDifficulty")
				.getTemp();
				//简单的题目临时表
				const qNumEasyTemp = db.collection("ds").where({
					Cid:this.cid,
					tagDifficulty:0
				})
				.field("_id,Chapterid,tagDifficulty")
				.getTemp();
				//提高的题目临时表
				const qNumHardTemp = db.collection("ds").where({
					Cid:this.cid,
					tagDifficulty:1
				})
				.field("_id,Chapterid,tagDifficulty")
				.getTemp();
				
				// 获取全部
				await db.collection(chapterTemp,qNumTemp).orderBy(
					"Chapterid","asc"
				).get()
				.then(res=>{
					this.chapterList = res.result.data;
					this.skeleton = false;
					console.log("获取成功",this.chapterList);
					// this.separateData();
				}).catch(()=>{
					uni.showToast({
						title:"章节数据获取失败",
						icon:'error'
					})
				})
				//基础篇
				const easyData = db.collection(chapterTemp,qNumEasyTemp)
				.orderBy(
					"Chapterid","asc"
				).get();
				easyData.then(res=>{
					this.easyList = res.result.data;
					console.log("easy",this.easyList);
				})
				
				//提高篇
				const hardData = db.collection(chapterTemp,qNumHardTemp)
				.orderBy(
					"Chapterid","asc"
				).get();
				hardData.then(res=>{
					this.hardList = res.result.data;
					console.log("hard",this.hardList);
				})
				
			},
			// 点击tab改变篇章内容
			clicktab(item) {
			    console.log('item', item);
				this.tabIndex = item.index
			},
		
			
			//跳转章节题目详情页
			goQuestionDeatil(chapterId){
				console.log("chapterId",chapterId);
				uni.navigateTo({
					url:"/pages/questionDetail/questionDetail?chapterId="+chapterId+"&uid="+this.uid+"&cid="+this.cid + "&mode="+"nomal"
				})
			},
			//按基础提高模式跳转
			goQuestionMode(chapterId,mode){
				uni.navigateTo({
					url:"/pages/questionDetail/questionDetail?chapterId="+chapterId+"&uid="+this.uid+"&cid="+this.cid+"&mode="+mode
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
	}
	.tabBox{
		background-color: #fff;
	}
	.chapterBox{
		background-color: #fff;
		display: flex;
		margin: 12rpx;
		border-radius: 16rpx;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 12rpx;
		.chapterTitle{
			width: 40%;
			font-size: 28rpx;
			color: #333;
		}
		.chapterContent{
			width: 45%;
			font-size: 24rpx;
			color: #999;
		}
		.more{
			width: 5%;
		}
	}
</style>
